<template>
  <div>
    <section class="title-bar">
      <el-row>
        <el-col :span="2">
          <el-button type="primary" v-permission="'/authority/queryTree,/authority/add'"
            @click="addDialogVisible = true" :icon="Plus">新增</el-button>
        </el-col>
        <el-col :span="22">
          <el-form :model="searchData" :inline="true">
            <el-form-item>
              <el-input type="text" placeholder="角色中文名称" v-model="searchData.roleCnName" clearable
                style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="loadTable" type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </section>

    <!-- 表格   -->
    <section>
      <el-table :data="tableData.rows" stripe :border="true" style="width: 100%">
        <el-table-column prop="id" label="系统编号">
        </el-table-column>
        <el-table-column prop="roleCnName" label="中文名称">
        </el-table-column>
        <el-table-column prop="roleEnName" label="英文名称">
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button 
            v-permission="'/role/assignAuthority'" 
            type="warning" :icon="Plus" @click="openAuthorityDia(scope.row.id)">分配权限
            </el-button>
            <el-button 
            v-permission="'/role/queryById,/role/modifyById'" 
            type="primary" :icon="Edit" @click="openUpdateDia(scope.row.id)">编辑
            </el-button>
            <el-button v-permission="'/role/deleteById'"  type="danger" :icon="Delete" @click="deleteById(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <!-- 分页   -->
    <section>
      <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageNowChange"
        :current-page="searchData.pageNow" :page-sizes="[5, 10, 15, 20]" :page-size="searchData.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
      </el-pagination>
    </section>

     <!-- 新增对话框 -->
     <AddRole :addDialogVisible="addDialogVisible" @closeDialog="addDialogVisible = false"
      @addSuccess="handleAddSuccess"></AddRole>
<!-- 修改对话框 -->
    <UpdateRole :updateDialogVisible="updateDialogVisible" @closeDialog="updateDialogVisible = false"
      @updateSuccess="handleUpdateSuccess" :idToUpdate="idToUpdate"></UpdateRole>
      <!-- 分配权限对话框 -->
    <AuthorityToAssign
       :authorityToAssignDialogVisible="authorityToAssignDialogVisible" 
       @closeDialog="authorityToAssignDialogVisible = false"
       :idToAssign="idToAssign"
      @confirmCheck="confirmCheck"></AuthorityToAssign>
  </div>
</template>
<script setup name='RoleManage' lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue';
import AddRole from '@/views/role/AddRole.vue';
import UpdateRole from '@/views/role/UpdateRole.vue';
import AuthorityToAssign from '@/views/role/AuthorityToAssign.vue';
import { loadTableApi, deleteByIdApi,assignAuthorityApi } from '@/api/roleApi';
import { useTable } from '@/hooks/useTable';
import { ElMessage } from 'element-plus';

// 控制新增对话框是否显示
let addDialogVisible = ref(false)
let updateDialogVisible = ref(false)
let authorityToAssignDialogVisible = ref(false)
let idToUpdate = ref('')
let idToAssign = ref('')

// 查询参数
let searchFormData = reactive({
  roleCnName: ''
})

let {
  searchData,
  tableData,
  loadTable,
  handlePageSizeChange,
  handlePageNowChange,
  deleteById
} = useTable({ searchFormData, loadTableApi, deleteByIdApi })

function openAuthorityDia(id:string) {
  idToAssign.value = id
  authorityToAssignDialogVisible.value = true
}

function handleAddSuccess() {
  addDialogVisible.value = false
  // 加载表格
  loadTable()
}
// 处理更新成功的事件
function handleUpdateSuccess() {
  updateDialogVisible.value = false
  loadTable()
}
// 打开修改对话框
function openUpdateDia(id: string) {
  idToUpdate.value = id
  updateDialogVisible.value = true
}
// 处理确认分配权限
function confirmCheck(checkedAuthorityIds:string[]) {
  authorityToAssignDialogVisible.value = false
  // 更新角色的权限
  assignAuthorityApi({roleId:idToAssign.value,authorityIds:checkedAuthorityIds})
  .then(result => {
    ElMessage({message:result.data,type:"success"})
    // 成功后刷新表格
    loadTable()
  })
}
onMounted(() => {
  loadTable()
})
</script>
<style scoped></style>